<script setup>
import { reactive, toRefs } from 'vue';
import { ElRadio, ElRadioGroup } from 'element-plus';
import LayerClose from '@/assets/images/base-map/layer-close.png';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { MeasureMapTool } from '@/pages/module-map/map-cesium-js/common-cesium.js';

const props = defineProps({
  toolbarRight: {
    type: String,
    default: '5.3125rem',
  },
});
const { toolbarRight } = toRefs(props);
const emit = defineEmits(['handleChangeIsMeasure']);

const state = reactive({
  map_measure_type: '',
});

const handleChangeShow = () => {
  emit('handleChangeIsMeasure');
};

const handleMapMeasure = (e) => {
  MeasureMapTool(e);
};
</script>
<template>
  <div class="map-measure absolute z-20" :style="{ right: toolbarRight }">
    <div class="line line-top-left"></div>
    <div class="line line-bottom-left"></div>
    <div class="line line-bottom-right"></div>
    <div class="bg"></div>
    <div class="content">
      <div class="top">
        <div class="bg-top"></div>
        <div class="text">测量工具</div>
        <div class="close-icon" @click="handleChangeShow()">
          <img :src="LayerClose" />
        </div>
      </div>
      <div class="box-content pl-13px">
        <ElRadioGroup v-model="state.map_measure_type" @change="(e) => handleMapMeasure(e)">
          <ElRadio :value="'不贴地'" class="map_measure_item">
            <SvgIconIndex
              icon-class="point"
              size="20px"
              class="mr-3px cursor-pointer"
              title="不贴地"
              :color="state.map_measure_type == '不贴地' ? '#67de7b' : '#fff'"
            />
            <p>不贴地</p>
          </ElRadio>
          <ElRadio :value="'空间距离'" class="map_measure_item">
            <SvgIconIndex
              :color="state.map_measure_type == '空间距离' ? '#67de7b' : '#fff'"
              icon-class="length"
              size="20px"
              class="mr-3px cursor-pointer"
              title="空间距离"
            />

            <p>空间距离</p>
          </ElRadio>
          <ElRadio :value="'空间面积'" class="map_measure_item">
            <SvgIconIndex
              :color="state.map_measure_type == '空间面积' ? '#67de7b' : '#fff'"
              icon-class="area"
              size="18px"
              class="mr-4px cursor-pointer"
              title="空间面积"
            />

            <p>空间面积</p>
          </ElRadio>
          <ElRadio :value="'三角量测'" class="map_measure_item">
            <SvgIconIndex
              :color="state.map_measure_type == '三角量测' ? '#67de7b' : '#fff'"
              icon-class="area"
              size="18px"
              class="mr-4px cursor-pointer"
              title="三角量测"
            />

            <p>三角量测</p>
          </ElRadio>
          <ElRadio :value="'加载模型'" class="map_measure_item">
            <SvgIconIndex
              :color="state.map_measure_type == '加载模型' ? '#67de7b' : '#fff'"
              icon-class="area"
              size="18px"
              class="mr-4px cursor-pointer"
              title="加载模型"
            />

            <p>加载模型</p>
          </ElRadio>
          <ElRadio :value="'清除量测'" class="map_measure_item">
            <SvgIconIndex
              :color="state.map_measure_type == '清除量测' ? '#67de7b' : '#fff'"
              icon-class="clear"
              size="20px"
              class="mr-3px cursor-pointer"
              title="清除量测"
            />

            <p class="eliminate_p">清除量测</p>
          </ElRadio>
        </ElRadioGroup>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.map-measure {
  top: 20%;
  width: 160px;
  min-height: 15.5rem;
  border-right: 2px solid rgb(38, 196, 251);
  border-left: 2px solid rgb(38, 196, 251);
  transition: 1s;
  .line {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 3px;
    background: rgba(38, 196, 251, 1);
  }
  .line-top-left {
    top: 0;
    left: 0;
  }
  .line-bottom-left {
    bottom: 0;
    left: 0;
  }
  .line-bottom-right {
    right: 0;
    bottom: 0;
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 19, 26, 0.7);
    opacity: 1;
    backdrop-filter: blur(10px);
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
    .top {
      width: 100%;
      height: 28px;
      padding-left: 13px;
      .text {
        position: absolute;
        z-index: 2;
        color: #fff;
        font-size: 14px;
        line-height: 28px;
      }

      .bg-top {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 28px;
        background: linear-gradient(90.44deg, rgba(38, 196, 251, 1) 0%, rgba(0, 13, 59, 0.19) 100%);
        opacity: 0.5;
      }
      .close-icon {
        position: absolute;
        top: -12px;
        right: -12px;
        z-index: 1;
        cursor: pointer;
      }
      img {
        display: block;
        width: 32px;
        height: 32px;
      }
    }
    .box-content {
      z-index: 3;
      width: 100%;
      margin-top: 11px;
      overflow: hidden;
      color: #fff;
    }
  }
}

:deep(.el-radio__label) {
  display: flex;
  align-items: center;

  p {
    color: #fff;
  }
}
</style>
